<template>
	<div id="audition_transfer" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				{{audition.className}}
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="info">
					已有{{stuList.length}}位学员报名，需要转班处理后才能删除
				</div>
				<div class="title_sub">学员列表</div>
				<table class="table" cellspacing="0">
					<thead class="thead">
						<tr>
							<td style="width: 1rem;">
								<div class="check" @click="checkAll(isCheckAll)"
									:class="isCheckAll? 'check_active':''">
									<div>全选</div>
								</div>
							</td>
							<td style="width: 3rem;">姓名</td>
							<td style="width: 2rem;">年龄</td>
							<td style="width: 3rem;">联系电话</td>
						</tr>
					</thead>
					<tbody class="tbody">
						<tr v-for="item in stuList">
							<td>
								<div class="check" @click="checkStu(item.clueId)"
									:class="checkList.indexOf(item.clueId)>-1? 'check_active':''"></div>
							</td>
		  					<td>{{item.realName}}</td>
		  					<td>{{item.age}}</td>
		  					<td>{{item.phone}}</td>
		  				</tr>
					</tbody>
				</table>
			</div>
			
			<div class="row">
				<label class="label">
					选择其他试听班级：
				</label>
				<el-select style="width: 2.2rem;" v-model="param.classId" id="classId"
							@change="auditionChange" placeholder="班级名称">
				    <el-option-group v-for="group in auditionOptions"
				    				 :key="group.type" :label="group.type">
					    <el-option v-for="item in group.list" :key="item.classId" :value="item.classId"
					        	   :label="item.className" :disabled="item.disable">
					     </el-option>
				    </el-option-group>
			  	</el-select>&nbsp;
			  	<el-date-picker style="width: 1.6rem;" v-model="classDate" value-format="yyyy-MM-dd"
				    			type="date" placeholder="上课日期" :clearable="false" id="classDate"
				    			@change="dateChange" :picker-options="pickerOptions">
			 	</el-date-picker>&nbsp;
			 	
			 	<el-select style="width: 1.6rem;" v-model="param.classSyllabusId"
						    id="classSyllabusId" placeholder="上课时间段">
				    <el-option v-for="item in syllabusList" :key="item.classSyllabusId"
				      		   :label="item.time" :value="item.classSyllabusId">
				    </el-option>
			  	</el-select>&emsp;
			 	<label v-if="syllabus">
			 		学员： {{syllabus.studentNum}} / {{syllabus.recruitNum}}
			 	</label>
			</div>
			
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">转 班</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			param : {
				classId : "",
				classSyllabusId : ""
			},
			//当前班级的学生列表，有效的课节Id列表
			audition : {},
			studentList : [],
			syllabusIds : [],
			//转班选的其他班级，课节列表
			auditionList : [],
			syllabusMap : {},
			syllabusList : [],
			checkList : [],
			classDate : null,
			 //日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					return (vm.syllabusMap[date]? false : true);
				}
			},
		}
	},
	computed : {
		isCheckAll : function() {
			var len = vm.studentList.length;
			return vm.checkList.length == len && len!=0;
		},
		auditionOptions : function() {
			var options = [
				{type : "线下试听", list : []},
			 	{type : "线上试听", list : []}
			];
			var now = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm");
			this.auditionList.forEach(function(item) {
				//过滤当前试听班级
				if(item.classId == vm.audition.classId) {
					return;
				}
				//根据有没有课节判断,加入到选项中
				let s = item.nearTrialClassSyllabus;
				
				if(s && s.endTime > now) {
					var index = (item.classTypeMode == 1? 0 : 1);
					options[index].list.push(item);
				}
			});
			return options;
		},
		stuList : function() {
			var list = [];
			var ids = [];
			this.studentList.forEach(function(item) {
				//把重复线索的排除掉
				if(ids.indexOf(item.clueId)<0) {
					list.push(item);
					ids.push(item.clueId);
				}
			});
			return list;
		},
		syllabus : function() {
			var syllabus = null;
			var v = this;
			v.syllabusList.forEach(function(item) {
				if(item.classSyllabusId == v.param.classSyllabusId) {
					syllabus = item;
					return false;
				}
			});
			return syllabus;
		}
	},
	methods : {
		init : function(audition) {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//初始化数据
			vm.audition = audition;
			vm.param = {
				classId : "",
				classSyllabusId : ""
			};
			vm.syllabusMap = {};
			vm.syllabusList = [];
			vm.checkList = [];
			vm.classDate = null;
			
			api.auditionList({campusId : vm.$store.state.campusId}).then(function(data) {
				vm.auditionList = data.list;
			});
			
			var param = {
				classId : audition.classId,
				startTime : tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss")
			};
			
			var flag = false;
			api.auditionSyllabus(param).then(function(data) {
				//保存不过期的课节列表
				vm.syllabusIds = [];
				data.list.forEach(function(item) {
					vm.syllabusIds.push(item.classSyllabusId);
				});
				
				if(flag) {
					setStudentList();
				} else {
					flag = true;
				}
			})
			
			api.auditionStudent({classId : audition.classId}).then(function(data) {
				vm.studentList = data.list;
				
				if(flag) {
					setStudentList();
				} else {
					flag = true;
				}
			})
			
			function setStudentList() {
				var list = vm.studentList;
				//遍历学生列表
				for(let i = 0; i < list.length; i++) {
					let id = list[i].classSyllabusId;
					//学生Id不在有效课节中
					if(vm.syllabusIds.indexOf(id)<0) {
						//删除这个学生
						list.splice(i,1);
						i--;
					}
				}
				//如果没有学生,则关闭,跳转到删除页
				if(list.length == 0) {
					vm.$emit('callback', vm.audition);
					vm.cancel();
				}
			}
			
		},
		cancel : function() {
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		sure : function() {
			//所选人数和可报人数
			var len = vm.checkList.length;
			var num = 0;
			if(vm.syllabus) {
				num = vm.syllabus.recruitNum - vm.syllabus.studentNum;
			};
			
			var rules = [{
				judge : len > 0,
				tips : "请至少选择一位学员进行转班"
			},{
				judge : vm.param.classId,
				focus : $("#audition_transfer #classId"),
				tips : "请选择试听班级"
			},{
				judge : vm.classDate,
				focus : $("#audition_transfer #classDate"),
				tips : "请选择上课日期"
			},{
				judge : vm.param.classSyllabusId,
				focus : $("#audition_transfer #classSyllabusId"),
				tips : "请选择上课时间段"
			},{
				judge : num >= len,
				focus : $("#audition_transfer #classSyllabusId"),
				tips : "所选人数超过当前班级可报人数，请重新选择"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			var list = [];
			vm.studentList.forEach(function(item) {
				if(vm.checkList.indexOf(item.clueId)>=0) {
					list.push({
						classStudentId : item.classStudentId,
						clueId : item.clueId,
						classId : vm.param.classId,
						classSyllabusId : vm.param.classSyllabusId,
					});
				}
			});
			
			api.auditionStuUpdate({list:list, _wait:""}).then(function(data) {
				//回调父页面刷新列表,当前页面重新初始化
				vm.$emit('update');
				vm.init(vm.audition);
			})
			
		},
		checkAll : function(flag) {
			//清空勾选列表
			vm.checkList = [];
			//如果不是已勾选的,则勾选全部
			if(!flag) {
				vm.studentList.forEach(function(item){
					vm.checkList.push(item.clueId);
				})
			}
		},
		checkStu : function(id) {
			//获取勾选列表和当前项的序号
			var c = vm.checkList;
			var index = c.indexOf(id);
			if(index>=0) {
				//如果当前id在已勾选列表,则删除
				c.splice(index,1);
			} else {
				//否则添加
				c.push(id);
			}
		},
		auditionChange : function() {
			//试听班级改变,清空日期和课节选择,清空课节列表
			vm.classDate = "";
			vm.param.classSyllabusId = "";
			vm.syllabusList = [];
			
			//重新获取课节数据
			var param = {
				classId : vm.param.classId,
				startTime : tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss")
			};
			api.auditionSyllabus(param).then(function(data) {
				//解析日期课节映射
				vm.syllabusMap = vm.getSyllabusMap(data.list);
			});
		},
		getSyllabusMap : function(list) {
			var m = {};
			list.forEach(function(item){
				//截取时间段
				item.time = item.startTime.substring(11,16) + " - "+ item.endTime.substring(11,16);
				//截取日期,作为key
				var k = item.startTime.substring(0,10);
				if(m[k] == null) {
					m[k] = [];
				}
				m[k].push(item);
			});
			return m;
		},
		dateChange : function() {
			//获取课节列表
			vm.syllabusList = vm.syllabusMap[vm.classDate];
			vm.param.classSyllabusId = "";
		}
	},
	created : function() {
		vm = this;
	}
}
</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped>

	.panel {
		width: 10rem;
	}
	.form {
		padding: 0 0.3rem;
		color: #666666;
	}
	.info {
		font-size: 0.16rem;	
		padding-top: 0.05rem;
		padding-bottom: 0.2rem;
	}
	.info>label {
		display: inline-block;
		width: 2.2rem;
	}
	.info>label:first-child {
		width: 3.7rem;
	}
	.title_sub {
		font-size: 0.16rem;	
		padding-bottom: 0.1rem;
	}
	.check {
		position: relative;
		margin: 0 auto;
		width: 0.3rem;
		height: 0.3rem;
		background-image: url(../../../assets/img/clue_manage/check_no.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 0.16rem;
		cursor: pointer;
	}
	.check_active {
		background-image: url(../../../assets/img/clue_manage/check_yes.png);
	}
	.check>div {
		position: absolute;
		width: 0.62rem;
		height: 0.3rem;
		text-align: right;
		user-select : none;
	}
	
	.row {
		font-size: 0.16rem;
		color: #666666;
		padding: 0.2rem 0.3rem 0 0.3rem;
	}
</style>